 <template>
   <!-- 电动车挂失 -->
   <view style="width: 100%;height: 100%;">
     <view class="root">
       <view class="content">
         <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
           err-show-type="toast">
           <view class="content-wrapper">
             <yy-title title="丢失信息"></yy-title>
             <view class="content-inner-wrapper">
               <uni-forms-item label="丢失时间:" name="lossTime" required key="lossTime">
                 <view class="form-content-item" :class="form.lossTime ?  '' : 'input-item'">
                   <uni-datetime-picker v-model="form.lossTime" type="datetime" :hide-second="true"
                     @change="handleTimeChange" :end="getEndOfTodayTimestamp()">
                     <uni-easyinput type="text" v-model="form.lossTime" :inputBorder="false" placeholder="请选择"
                       :clearable="true" disabled />
                   </uni-datetime-picker>
                   <image :src="baseImgUrl + 'day-icon2.png'" style="width: 30rpx;height: 30rpx;padding:0 10rpx;">
                   </image>
                 </view>
               </uni-forms-item>
               <uni-forms-item label="丢失地点:" name="lossAddress" required key="lossAddress">
                 <view class="form-content-item" :class="form.lossAddress ?  '' : 'input-item'" @click="handleMap">
                   <uni-easyinput disabled @clear="handleAddressClear" type="text" v-model="form.lossAddress"
                     :inputBorder="false" placeholder="请选择" :clearable="true" />
                   <image style="width: 30rpx;height: 40rpx;padding:0 10rpx;" :src="`${baseImgUrl}map-icon.png`">
                   </image>
                 </view>
               </uni-forms-item>
               <uni-forms-item label="报案派出所:" name="lossPoliceAgencyId" required key="lossPoliceAgencyId">
                 <view class="form-content-item" @click="policeAgencyFoces">
                   <view :class="form.policeAgencyName ? 'long-select-value' : 'long-select-value-empty'">
                     {{form.policeAgencyName ? form.policeAgencyName : '请选择'}}
                   </view>
                   <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
                 </view>
               </uni-forms-item>
             </view>
           </view>
         </uni-forms>
       </view>
       <view class="bottom">
         <yy-button-submit @submit="onSubmit"></yy-button-submit>
       </view>
     </view>
   </view>
 </template>

 <script>
   import {
     Toast,
     getEndOfTodayTimestamp,
     getOptionsParams,
     isLoading,
     navBack,
     navTo
   } from '@/utils/util.js'
   import uploadFileMixin from '../utils/upload-file-mixin'
   import {
     electricvehiclesLossReport,
     phoneLossReport
   } from '../api/api'
   export default {
     mixins: [uploadFileMixin],
     data() {
       return {
         baseImgUrl: this.$baseImgUrl,
         form: this.initForm(),
         routerParams: {},
         rules: {
           lossTime: {
             rules: [{
               required: true,
               errorMessage: "请选择丢失时间！",
             }]
           },
           lossAddress: {
             rules: [{
               required: true,
               errorMessage: "请选择丢失地点！",
             }]
           },
           lossPoliceAgencyId: {
             rules: [{
               required: true,
               errorMessage: "请选择报案派出所！",
             }]
           }
         }
       }
     },
     onReady() {
       this.$refs.formRef.setRules(this.rules)
     },
     onLoad(options) {
       this.routerParams = getOptionsParams(options, 'params')
       uni.$on("leadPoliceStation", (v) => {
         let {
           policeAgencyName,
           id
         } = v[0];
         this.$set(this.form, "lossPoliceAgencyId", id);
         this.$set(this.form, "policeAgencyName", policeAgencyName);
       });
     },
     onUnload() {
       uni.$off('leadPoliceStation')
     },
     methods: {
       getEndOfTodayTimestamp,
       initForm() {
         return {
           lossTime: '',
           lossAddress: '',
           lat: '',
           lng: '',
           lossPoliceAgencyId: '',
           policeAgencyName: ''
         }
       },
       onSubmit() {
         this.$refs.formRef.validate().then(() => {
             let data = {
               id: this.routerParams.id,
               ...this.form,
             };
             isLoading(true)
             electricvehiclesLossReport(data).then((res) => {
                 if (res.code == 200) {
                   setTimeout(() => {
                     navBack()
                   }, 100)
                   uni.$emit('register-load')
                 }
                 Toast(res.message);
               })
               .finally(() => {
                 isLoading(false)
               })
           })
           .catch(() => {})
       },
       handleTimeChange() {

       },
       handleMap() {
         uni.chooseLocation({
           success: (res) => {
             let {
               longitude,
               latitude,
               address
             } = res;
             this.form.lossAddress = address
             this.form.lng = longitude
             this.form.lat = latitude
           },
           fail: function(err) {
             console.log(err, "错误的");
           },
         });
       },
       policeAgencyFoces() {
         if (!this.form.lng) {
           Toast("请先选择丢失地点");
           return;
         }
         uni.navigateTo({
           url: `/leadReporting/leadReporting/leadPoliceStation?lng=${this.form.lng}&lat=${this.form.lat}`,
         });
       },
       handleAddressClear() {
         this.form.lat = ''
         this.form.lng = ''
         this.form.lossAddress = ''
       }
     }
   }
 </script>

 <style lang="scss" scoped>
   @import '@/styles/uni-form-label-top.scss';

   .root {
     display: flex;
     width: 100%;
     height: 100%;
     flex-direction: column;
     background: #F9F9F9;

     .content {
       flex: 1;
       height: 0;
       overflow: auto;

       .content-wrapper {
         background: #FFFFFF;
         box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
         border-radius: 8rpx 8rpx 8rpx 8rpx;
         padding: 40rpx 20rpx;
         margin-bottom: 10rpx;
       }

       .pawn-list-wrapper {
         background: #F9F9F9;
         padding: 25rpx;
         margin-bottom: 10rpx;

         .title-name {
           display: flex;
           justify-content: space-between;
           margin-bottom: 23rpx;

           .name-i {
             font-weight: bold;
             font-size: 32rpx;
             color: #181818;
           }

           .delete-i {
             display: flex;
             align-items: center;
             font-weight: 500;
             font-size: 26rpx;
             color: #F94A4A;
             flex-shrink: 0;

             .text-delete {
               margin-left: 10rpx;
             }
           }
         }

         .i-item {
           margin-bottom: 15rpx;
           display: flex;

           .i-label {
             font-weight: 500;
             font-size: 28rpx;
             color: #999999;
             width: 119rpx;
             margin-right: 16rpx;
             position: relative;
             text-align: justify;
             text-align-last: justify;
             flex-shrink: 0;



             &::after {
               content: ':';
               position: absolute;
               right: -8rpx;
             }
           }

           .i-value {
             font-weight: bold;
             font-size: 28rpx;
             color: #101010;
           }

         }
       }

       .datetime-picker-wrapper {
         display: flex;
         align-items: center;
         justify-content: space-between;

         .text-t {
           font-weight: 500;
           font-size: 30rpx;
           color: #666666;
         }

         .t-item {
           font-weight: 400;
           font-size: 28rpx;
           color: #A2A2A2;
           width: 304rpx;
           height: 70rpx;
           background: #F9F9F9;
           border-radius: 8rpx 8rpx 8rpx 8rpx;
           border: 1rpx solid #F1EEEE;
           display: flex;
           align-items: center;
           justify-content: center;
         }

         .has-value {
           font-weight: bold;
           font-size: 30rpx;
           color: #181818;
         }
       }
     }
   }
 </style>